<!-- 弹窗组件小龙开发所有 -->
<template>
  <view>
    <!-- 模态框 -->
    <view @tap="Modal" :class="{mask:model}"></view>
    <!-- 弹窗主体 -->
    <view :style="{'height':barHidth+'rpx'}" class="active" :class="{add:model}">
      <view class="title">
        {{title}}
        <text @tap="showModal">X</text>
      </view>
      <view class="cont" :style="{height:barHidth-80 +'rpx'}">
        <view class="day">
          <view
            :class="index === isIndex?'active_copy':''"
            v-for="(item,index) in content"
            :key="item.id"
            @tap="dataCallback(index,item)"
          >{{item.timezh}}</view>
        </view>

        <scroll-view class="content" :scroll-y="true" :scroll-top="scrollTop">
			<template v-if="Days.length>0">
				<view
				  class="appoint"
				  :class="{'longActive':index === Indexes, 'disabled':matchTimes(item.timestr)}" 
				  @tap="matchTimes(item.timestr)||timeCallback(index,item)"
				  v-for="(item,index) in Days"
				  :key="index"
				>
				  {{item.timestr}} <text v-if="matchTimes(item.timestr)">(不可选)</text>
				  <uni-icons
				    v-if="index === Indexes"
				    type="checkmarkempty"
				    color="#E52F27"
				    style="margin-left:20rpx"
				  ></uni-icons>
				  <!-- <text :class="index === Indexes?'cuIcon-check':''"></text> -->
				</view>
			</template>
			<view class="empty" v-else>
				暂无可配送时间~
			</view>
          
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //控制弹窗的隐藏显示
    model: {
      type: Boolean,
      default: false
    },
    //弹窗标题
    title: {
      type: String,
      default: '弹窗测试'
    },
    //弹窗内容
    // content: {
    // 	type: Array,
    // 	default: [{
    // 		content: '我是弹窗内容'
    // 	}]
    // },
    //弹窗 窗口高度
    barHidth: {
      type: Number,
      default: 600
    },
    //点击模态框是否能关闭弹窗
    showYes: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      scrollTop: 0,
      isIndex: 0,
      Indexes: null,
      Days: [],
      content: [],
			disabledTime: [],
			timeRange: "8:30-21:00"
    }
  },

  //初始化
  mounted() {
    this.getTime('now')
	this.getNoDeliveryTime()

    this.content = [
      {
        timezh: "今天" + this.GetDateStr(0, 'shot'),
        timeformatter: this.GetDateStr(0),
      },
      {
        timezh: "明天" + this.GetDateStr(1, 'shot'),
        timeformatter: this.GetDateStr(1),
      }
    ]
  },
	computed:{
		
	},
  methods: {
	  matchTimes(val){
		  if( this.disabledTime.indexOf(val)>-1) {
			  return true;
		  }else{
			  return false
		  }
	  },
	  getNoDeliveryTime(type='now'){
		  this.$http.getNoDeliveryTime({type:type=='now'?'today':'tomorrow'}).then(res=>{
			  if(res.code === 1){
				  this.disabledTime = res.data
					if(type == 'now'){
						this.setDefaultTime()
					}
			  }
		  })
	  },
		setDefaultTime(){
			const temp = JSON.parse(JSON.stringify(this.Days));
			console.log('++++++++++')
			console.log(temp)
			this.disabledTime.forEach(item=>{
				temp.forEach((items,index)=>{
					if(item == items.timestr){
						temp.splice(index,1)
					}
				})
			})
			console.log(temp)
			if(temp.length>0){
				this.$emit('defaultTime',{
					time: temp[0].timestr,
					timeShow: '今天'+temp[0].timestr
				})
			}
		},

    getTime(type) {
			const startH = Number(this.timeRange.split('-')[0].split(':')[0]) 
			const startM = Number(this.timeRange.split('-')[0].split(':')[1]) 
			const endH = Number(this.timeRange.split('-')[1].split(':')[0])
			const endM = Number(this.timeRange.split('-')[1].split(':')[1])

      let timelist = [];
      const date = new Date()
      const hour = type == date.getHours() < startH ? startH : 'now' ? date.getHours() : startH;
      for (let i = hour; i < endH+1; i++) {
				if(i == date.getHours() && date.getHours()>startH){
					// 当前小时
					if( date.getMinutes()>30){
						
					}else{
						timelist.push(
							{ "timestr": i + ':30-' + (i * 1 + 1) + ':00' }
						)
					}
				}else{
					if(i == startH){
						if(startM == 30){
							timelist.push(
								{ "timestr": i + ':30-' + (i * 1 + 1) + ':00' }
							)
						}else{
							timelist.push(
								{ "timestr": i + ':00-' + (i * 1) + ':30' },
								{ "timestr": i + ':30-' + (i * 1 + 1) + ':00' }
							)
						}
					}else if(i>startH && i<endH){
						timelist.push(
							{ "timestr": i + ':00-' + (i * 1) + ':30' },
							{ "timestr": i + ':30-' + (i * 1 + 1) + ':00' }
						)
					}else{
						if(endM == 30){
							timelist.push(
								{ "timestr": i + ':00-' + (i * 1) + ':30' },
							)
						}
					}
				}

       
      }
      this.Days = timelist;
    },
    GetDateStr(AddDayCount, type) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;//获取当前月份的日期
      var d = dd.getDate();
      if (type == 'shot') {
        return '(' + m + "-" + d + ')';
      } else {
        return y + "-" + m + "-" + d;
      }
    },

    // 关闭窗口
    showModal() {
      this.$emit('close', false)
    },
    // 点击模态框关闭窗口
    Modal() {
      if (this.showYes) {
        this.$emit('close', false)
      }
    },
    //配送时间切换回顶
    gotop() {
      this.scrollTop = 1;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },

    //切换日期
    dataCallback(inedx, item) {
      this.isIndex = inedx;
      this.Indexes = null;
      let type = ''
      if (inedx == 0) {
        type = 'now'
      } else {
        type = ''
      }
      this.getTime(type)
	  this.getNoDeliveryTime(type)
      this.gotop();
      // this.$emit('dataCallback', item)
      // this.$emit('dataCallback', this.content[inedx].timeformatter)
    },

    //选择时间
    timeCallback(inedx, item) {
      console.log('=====>', inedx, this.content)
      this.Indexes = inedx;
      this.modalName = null;
      let res = { time: '', timeshow: '' }
      res.time = this.content[this.isIndex].timeformatter + ' ' + item.timestr
      res.timeshow = this.content[this.isIndex].timezh + ' ' + item.timestr
      this.$emit('timeCallback', res)
    },
  }
}
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  animation: getInto 0.5s 1;
  opacity: 0.5;
  z-index: 999;
}

@keyframes getInto {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.5;
  }
}

.active {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 400rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  overflow: hidden;
  transform: translateY(100%);
  transition: 0.4s;
}

.add {
  transform: translateY(0);
}

.title {
  position: relative;
  text-align: center;
  background-color: #fff;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #eee;
}

.title > text {
  position: absolute;
  right: 14rpx;
  width: 40rpx;
  height: 40prx;
  color: #666;
  border-radius: 50%;
}

.cont {
  display: flex;
  background-color: #fff;
  overflow-y: scroll;
}

.day {
  flex: 2;
  background-color: #fff;
  border-right: 2rpx solid #f8f8f8;
  text-align: center;
}

.day view {
  padding: 30rpx 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.content {
  flex: 4;
  font-size: 28rpx;
  border-bottom: 40rpx solid #fff;
  background-color: #fff;
}

.appoint {
  text-align: left;
  padding: 30rpx;
  border-bottom: 2rpx solid #f8f8f8;
}

.appoint text {
  margin-left: 30rpx;
}

.active_copy {
  position: relative;
  background-color: #f7d7d7;
  color: #c82c27;
  box-sizing: border-box;
}

.active_copy::after {
  content: "";
  width: 5rpx;
  height: 94rpx;
  background: #c82727;
  position: absolute;
  top: 0;
  right: 0;
}

.longActive {
  position: relative;
  color: #c82727;
}
.disabled{
	color: #bbb;
}

.cuIcon-check {
  position: absolute;
  width: 30rpx;
  left: 210rpx;
  height: 16rpx;
  border-bottom: 4rpx solid #27c866;
  border-left: 4rpx solid #27c866;
  transform: rotate(-45deg);
}
.empty{
	text-align: center;
	padding: 200rpx 0;
	color: #aaa;
}
</style>
